<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论文信息展示</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="loadPapersBtn">加载论文数据</button>
<table id="papersTable">
    <thead>
    <tr>
        <th>题名</th>
        <th>作者</th>
        <th>来源</th>
        <th>发表时间</th>
    </tr>
    </thead>
    <tbody>
    <!-- 数据将通过 AJAX 动态填充 -->
    </tbody>
</table>

<script>
    $(document).ready(function () {
        $('#loadPapersBtn').click(function () {
            $.ajax({
                url: '/papers-data',
                method: 'GET',
                dataType: 'json',
                success: function (papers) {
                    var tableBody = $('#papersTable tbody');
                    tableBody.empty();
                    $.each(papers, function (index, paper) {
                        var row = '<tr>' +
                            '<td>' + paper.title + '</td>' +
                            '<td>' + paper.authors + '</td>' +
                            '<td>' + paper.source + '</td>' +
                            '<td>' + paper.publishTime + '</td>' +
                            '</tr>';
                        tableBody.append(row);
                    });
                },
                error: function () {
                    alert('加载数据失败，请稍后重试。');
                }
            });
        });
    });
</script>
</body>
</html>